﻿<template>
  <baseUI :isShow="myConfig.isShow" :label="myConfig.label" :showLabel="myConfig.showLabel">
    <el-radio-group v-model="selectedValue" class="x-fillitem el-group-list" @change="onChanged" :disabled="!myConfig.isEnable" :style="myConfig.myStyle">
      <el-radio-button v-for="(item,index) in list" :key="index" :label="item[valueKey]">{{item[textKey]}}</el-radio-button>
    </el-radio-group>
  </baseUI>
</template>
<script>
import baseComponent from '../baseComponent.vue'
import baseUI from '../baseUI.vue'
export default {
  components: {
    baseComponent, baseUI
  },
  mixins: [baseComponent],
  mounted () {
    this.list = this.myData ? this.myData : []
  },
  data () {
    return {
      list: [],
      valueKey: 'label',
      textKey: 'text'
    }
  },
  methods: {
    load (data) {
      if (data) {
        this.list = data
      }
    }
  }
}
</script>
<style>
.el-group-list.el-radio-group{
  display: flex;
  flex-direction: column;
  align-items:stretch;
}
.el-group-list.el-radio-group .el-radio-button:first-child .el-radio-button__inner,
.el-group-list.el-radio-group .el-radio-button:last-child .el-radio-button__inner,
.el-group-list.el-radio-group  .el-radio-button:first-child .el-radio-button__inner,
.el-group-list.el-radio-group .el-radio-button__inner
{
  border-radius: 0px !important;
  border: none !important;
}
.el-group-list.el-radio-group .el-radio-button{
  border-bottom: 1px solid #F7F7F7 !important;
}
.el-group-list.el-radio-group{
  border: 1px solid #dcdfe6;
}
.el-group-list.el-radio-group > label > span{
  width: 100%;
  text-align: left;
  padding-left: 20px;
}
</style>
